
    <div class="am-demo-page">
      <div style="padding: 15px;font-size: 16px; color:#000">Basic</div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Customize to focus</div>
        <div class="am-list-body">
          <TextareaItem
            [placeholder]="'auto focus in Alipay client'"
            [autoFocus]="true"
            [title]="'标题'"
            [autoHeight]="true"
          ></TextareaItem>
          <TextareaItem
            [placeholder]="'click the button below to focus'"
            [title]="'标题'"
            [autoHeight]="true"
            [focus]="inputFocus"
          ></TextareaItem>
          <div class="am-list-item am-list-item-middle">
            <div class="am-list-line">
              <div
                class="am-list-content"
                style="width:100%;color:#108ee9;text-align:center"
                (click)="clickFocusInput()"
              >
                click to focus
              </div>
            </div>
            <div class="am-list-ripple" style="display: none;"></div>
          </div>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Auto / Fixed height</div>
        <div class="am-list-body">
          <TextareaItem [title]="'高度自适应'" [autoHeight]="true" [labelNumber]="5"> </TextareaItem>
          <TextareaItem [editable]="false" [autoHeight]="true" [value]="readonlyValue"> </TextareaItem>
          <TextareaItem [rows]="3" [placeholder]="'fixed number of lines'"> </TextareaItem>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Show clear</div>
        <div class="am-list-body">
          <TextareaItem [clear]="true" [placeholder]="'displayed clear while typing'" [title]="'标题'"></TextareaItem>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Custom title（text / image / empty)</div>
        <div class="am-list-body">
          <TextareaItem [title]="customTitle" [placeholder]="'title can be customized'"> </TextareaItem>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Limited value length</div>
        <div class="am-list-body">
          <TextareaItem [placeholder]="'can enter up to 10 characters'" [count]="10"></TextareaItem>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Count</div>
        <div class="am-list-body">
          <TextareaItem [rows]="5" [count]="100" [defaultValue]="'计数功能,我的意见是...'">手机号码</TextareaItem>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Not editable / Disabled</div>
        <div class="am-list-body">
          <TextareaItem [title]="'姓名'" [editable]="false" [defaultValue]="'not editable'"></TextareaItem>
          <TextareaItem [title]="'姓名'" [disabled]="true" [value]="'disabled style'"></TextareaItem>
        </div>
      </div>
    </div>

    <ng-template #customTitle>
      <img
        src="https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"
        style="width:28px;height:28px"
        alt=""
      />
    </ng-template>
  